<template>
  <div class="layout">
    <a-layout id="components-layout-demo-top-side-2" style="height: 100%">
      <a-layout-header class="header">
        <div class="flex space-between flex-y-center" style="color: #fff; height: 48px">
          <div class="ml20 flex flex-y-center">
            <img style="max-height: 40px;" alt=""
                 :src="maxLogo" key="min-logo"/>
            <span class="font16 ml10 line22 colorFFF"><span class="font16 line22">{{deptName}}</span>高智就业</span>
            <div class="ml50">
              <menuData :menus="routerList"></menuData>
            </div>
          </div>
          <div class="flex space-between mr40">
            <qr-code class="mr40"></qr-code>
            <div class="flex flex-y-center mr40">
              <img src="@/assets/img/danwei.png" alt="" class="mr10">
              {{ deptName }}
            </div>
<!--            <fullscreen v-model="isFullscreen" style="margin-right: 40px"/>-->
            <user ref="user" :message-unread-count="unreadCount" :user-avatar="userAvatar"/>  
          </div>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout style="padding: 12px">
          <a-layout-content :style="{
              margin: 0,
              minHeight: '280px',
            }">
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import menuData from "./menu/menu.vue";
import User from "./components/user";
import QrCode from "./components/qrCode/qrCode";
import Fullscreen from "./components/fullscreen";
import {
  mapState
} from "vuex";
import maxLogo from "@/assets/images/logo-min.png";

export default {
  name: "Main",
  components: {
    menuData,
    User,
    QrCode,
    Fullscreen,
  },
  data() {
    return {
      maxLogo,
      baseUrl: this.$config.fileUrl(),
      isFullscreen: false,
      menus: "",
      deptName: "",  // 所在单位
      a: '无敌'
    };
  },
  watch: {},
  created() {
    // this.menus = this.$store.getters.menuList;
    // 所在单位
    let localItem = JSON.parse(window.localStorage.getItem("myData"));
    this.deptName = localItem.deptName;
  },
  computed: {
    routerList() {
      return JSON.parse(localStorage.getItem('routerList'))
    },
    userAvatar() {
      return this.$store.state.user.avatarImgPath;
    },
    unreadCount() {
      return this.$store.state.user.unreadCount;
    },
    tagNavList() {
      return this.$store.state.app.tagNavList;
    },
    cacheList() {
      const list = [
        "ParentView",
        ...(this.tagNavList.length ?
          this.tagNavList
            .filter((item) => !(item.meta && item.meta.notCache))
            .map((item) => item.name) : []),
      ];
      return list;
    },
  },
  methods: {
    abc() {
      console.log('动态路由信息', this.$router);
      // const res = this.$store.user.state.jj
      // let resList = JSON.parse(JSON.stringify(res.routerList));
      let serLists = JSON.parse(localStorage.getItem('routerList'))
      console.log('从本地取出来的权限信息', serLists);
      console.log('mian');
      console.log('取', serLists);
      // console.log('resList', resList);
      // const abc = this.$router
      // console.log(abc);
      // const 
      this.menus = this.routerList
    }
  },
};

</script>

<style lang="less" scoped>

/deep/ .vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    width: 524px !important;
    height: 377px !important;
    top: 0 !important;

    .ivu-modal-content {
      border-radius: 5px !important;
      height: 100% !important;
    }

    .ivu-modal-header {
      border-bottom: 1px solid #e8eaec !important;
    }

    .ivu-modal-body {
      height: 260px;
    }
  }
}

#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}

.header {
  padding: 0 !important;
  height: 48px !important;
  background: #1577FE !important;
}

.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}

/deep/ .ant-layout-header {
  line-height: 47px;
}

/deep/ .ant-layout-sider {
  // min-width: 211px !important;
  padding-top: 8px;
}

.btm {
  width: 100%;
  border-top: 1px solid #eceff4;
}

</style>
